<template>
  <el-dialog
    width="1100px"
    :title="$t('产品查询')"
    destroy-on-close
    append-to-body
    :visible.sync="show"
    :before-close="cancel">
    <el-row style="margin-bottom: 10px">
      <el-form
        :model="queryParams"
        ref="queryForm"
        size="small"
        :inline="true"
        v-show="showSearch"
        label-width="68px">
        <el-form-item label="sku" prop="skuNo">
          <el-input v-model="queryParams.skuNo" clearable @keyup.enter.native="getList" />
        </el-form-item>
        <el-form-item :label="$t('二维码')" prop="skuSer">
          <el-input v-model="queryParams.skuSer" clearable @keyup.enter.native="getList" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="getList">
            {{ $t('查询') }}
          </el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <el-table
      show-summary
      :summary-method="(e) => handleSum(e, ['skuNum'], $t('统计数量'))"
      :height="calTableHeight() - 150"
      @select="handleTableSelect"
      ref="TableRef"
      :data="tableData"
      @selection-change="(rows) => (tableCheck = rows)">
      <!-- <el-table-column :selectable="() => true" type="selection" width="55" align="center" /> -->
      <el-table-column show-overflow-tooltip align="center" label="sku" prop="skuNo" />
      <el-table-column show-overflow-tooltip align="center" :label="$t('库位号')" prop="spNo" />
      <el-table-column
        show-overflow-tooltip
        align="center"
        :label="$t('备货区货架号')"
        prop="storageAreaName" />
      <el-table-column show-overflow-tooltip align="center" :label="$t('位置')" prop="slotNo" />
      <el-table-column show-overflow-tooltip align="center" :label="$t('数量')" prop="skuNum" />
      <el-table-column show-overflow-tooltip align="center" :label="$t('入库时间')" prop="inTime" width="150"/>
      <el-table-column show-overflow-tooltip align="center" :label="$t('操作')" width="200">
        <template slot-scope="{ row }">
          <el-button @click="handleGoStorageArea(row)" type="text" size="mini">{{
            $t('转到对应货架')
          }}</el-button>
          <el-button
            type="text"
            v-hasPermi="['distribution:storageAreaSlot:outboundAllSlot']"
            size="mini"
            @click="handleOutboundAllSlot(row)">
            {{ $t('全部出库') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList" />
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">{{ $t('关闭') }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import handleSum from '@/utils/handleSum'

import { outboundAllSlot, getStorageAreaSlotBySearch } from '@/api/distribution/sku/storageArea'

export default {
  activated() {
    this.$nextTick(() => this.$refs['TableRef']?.doLayout())
  },
  props: {
    /**
     * 控制显示隐藏
     */
    show: {
      type: Boolean,
      required: true,
      default: false,
    },
  },
  data() {
    return {
      handleSum,
      showSearch: true,
      tableCheck: [],
      tableData: [],
      total: 0,
      // 查询参数
      queryParams: {
        skuNo: '',
        skuSer: '',
        pageNum: 1,
        pageSize: 10,
      },
    }
  },
  computed: {},
  watch: {
    show: function (newValue) {
      if (newValue) {
        // this.getList()
      }
    },
  },
  methods: {
    handleGoStorageArea(row) {
      this.$confirm(this.$t('确认转到对应货架?'), this.$t('提示'), {
        type: 'warning',
      }).then(() => {
        this.$emit('getListByProductSearch', row)
        this.cancel()
      })
    },
    handleOutboundAllSlot(row) {
      this.$confirm('确定全部出库?', '提示', { type: 'warning' })
        .then(() => {
          outboundAllSlot({ id: row.id }).then((res) => {
            const { code, data, msg } = res
            if (code === 200) {
              this.$message({ type: 'success', message: msg })
              this.getList()
            }
          })
        })
        .catch((e) => e)
    },
    handleTableSelect(selection, row) {
      if (selection.length > 1) {
        this.$message({ type: 'error', message: '只能选择一个' })
        this.$refs['TableRef'].toggleRowSelection(row)
      }
    },

    getList() {
      getStorageAreaSlotBySearch(this.queryParams).then((res) => {
        this.tableData = res.data
      })
    },

    cancel() {
      this.$emit('update:show', false)
    },
    /** 重置按钮操作 */
    resetQuery() {
      Object.keys(this.queryParams).forEach((key) => {
        this.queryParams[key] = null
      })
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = 10
      this.getList()
    },
  },
}
</script>
<style scoped lang="scss"></style>
